<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
  </div>
  <div>
    <div v-for="(item,index) in data.goodsList" :key="index" @click="data.goodsClick(item)">{{item}}</div>
  </div>
  <div>这是点击选中的食物[{{data.goods}}]</div>
</template>

<script lang="ts">
import { ref, reactive } from 'vue'

export default {
  name: 'Home',
  setup() {
    const data = reactive({
      goodsList: ['面包', '牛奶', '矿泉水', '盒饭'],
      goods: '',
      goodsClick: (goods: string) => {
        console.log(goods)
        data.goods = goods
      },
    })

    return {
      data,
    }
  },
}
</script>
